<template>
  <view class="content" v-if="data">
    <view
      class="select"
      v-for="(item, index) in keyList"
      :key="index"
      v-if="data[item.key]"
    >
      <view>{{ item.name }}</view>
      <view>{{ data[item.key] }}</view>
    </view>
    <view class="select" style="padding-bottom: 0" v-if="imgUrls.length">
      <view>附件</view>
      <view style="display: flex; flex-wrap: wrap">
        <image
          v-for="(item, index) in imgUrls"
          @click="previewImage(item)"
          :key="index"
          :src="item"
        />
      </view>
    </view>
    <view class="btn" @click="showActionSheet = true">
      更多内容
      <image src="../static/image/arrow_right_white.png" />
    </view>
    <view style="height: 60rpx" />
    <sheet
      :show="showActionSheet"
      :tips="tips"
      :item-list="itemList"
      :mask-closable="maskClosable"
      :color="color"
      :size="size"
      :is-cancel="isCancel"
      @click="sheetClick"
      @cancel="showActionSheet = false"
    ></sheet>
  </view>
</template>

<script>
import API from "@/common/api.js";
import util from "@/common/util.js";
import sheet from "@/components/tui-actionsheet/tui-actionsheet.vue";
export default {
  components: {
    sheet,
  },
  data() {
    return {
      data: null,
      key: "",
      pzhAuthorization: uni.getStorageSync("pzhAuthorization"),
      modelList: [],
      userList: [],
      keyList: [
        { name: "名称", key: "sbmc" },
        { name: "编码", key: "sbbm" },
        { name: "类型", key: "sblx_name" },
        { name: "型号", key: "model_name" },
        { name: "上级", key: "parent_name" },
        { name: "安装位置", key: "sbdz" },
        { name: "部门", key: "dept_name" },
        { name: "负责人", key: "fzr_name" },
        { name: "检修周期(小时)", key: "jxzq" },
        { name: "桩号位置", key: "zhwz" },
        { name: "设计规模", key: "sjgm" },
        { name: "管径", key: "gj" },
        { name: "启用时间", key: "qysj" },
        { name: "累计运行时间(小时)", key: "ljsj" },
        { name: "状态", key: "status_name" },
        { name: "备注", key: "bz" },
      ],
      imgUrls: [],
      showActionSheet: false,
      tips: "请选择您要查看的数据",
      itemList: [
        {
          text: "附属参数",
          color: "#2B2B2B",
          url: "equipmentSubsidiary",
        },
        {
          text: "备件",
          color: "#2B2B2B",
          url: "equipmentSparePart",
        },
        {
          text: "经纬度",
          color: "#2B2B2B",
          url: "equipmentCoordinate",
        },
        {
          text: "电机参数",
          color: "#2B2B2B",
          url: "machinery",
        },
        {
          text: "维修记录",
          color: "#2B2B2B",
          url: "equipmentRepair",
        },
        {
          text: "故障记录",
          color: "#2B2B2B",
          url: "equipmentFault",
        },
        {
          text: "设备位置",
          color: "#2B2B2B",
          url: "inspectionMap",
        },
      ],
      maskClosable: true,
      color: "#9a9a9a",
      size: 26,
      isCancel: true,
    };
  },
  onShow() {},
  onLoad(options) {
    this.getData();
    this.selectOnlineEquModel();
    this.selectOrgOptionsList();
  },
  methods: {
    previewImage(item) {
      uni.previewImage({
        current: item, // 当前显示图片的http链接
        urls: this.imgUrls, // 需要预览的图片http链接列表
      });
    },
    sheetClick(e) {
      let url = "";
      if (e.index == 6) {
        let data = [
          {
            longitude: this.data.jwdList[0].jd,
            latitude: this.data.jwdList[0].wd,
            name: this.data.sbmc,
          },
        ];
        url =
          this.itemList[e.index].url +
          "?data=" +
          encodeURIComponent(JSON.stringify(data)) +
          "&titleName=设备位置";
      } else {
        url = this.itemList[e.index].url + "?id=" + this.data.id;
      }
      uni.navigateTo({
        url,
      });
      this.showActionSheet = false;
    },
    getData() {
      this.data = uni.getStorageSync("equipmentSubsidiaryData");
      if (this.data.qysj) {
        this.data.ljsj = Number(
          (new Date().getTime() - new Date(this.data.qysj).getTime()) / 3600000
        ).toFixed(2);
      }
      this.data.attachList = this.data.attachList.replace(
        /id=/g,
        `pzhAuthorization=${this.pzhAuthorization}&id=`
      );
      let re = /<img.*?>/g;
      let arr = this.data.attachList.match(re);
      if (arr != undefined && arr.length) {
        arr.forEach((it) => {
          this.imgUrls.push(it.match(/\ssrc=['"](.*?)['"]/)[1]);
        });
      }
      let status = {
        used: "在用",
        repair: "送修",
        discard: "废弃",
        out: "停用",
      };
      this.data.status_name = status[this.data.status];
      setTimeout(() => {
        console.log(this.modelList, this.bmList, this.userList);
        if (this.modelList) {
          this.modelList.some((item) => {
            if (item.id == this.data.model_id) {
              this.data.model_name = item.sblx_name + `(${item.model_sn})`;
              return true;
            }
          });
        }
        if (this.bmList) {
          this.bmList.some((item) => {
            if (item.DEPT_ID == this.data.dept_id) {
              this.data.dept_name = item.SIMPLE_NAME;
              return true;
            }
          });
        }
        if (this.userList) {
          this.userList.some((item) => {
            if (item.id == this.data.fzr) {
              this.data.fzr_name = item.NAME;
              return true;
            }
          });
        }

        uni.setStorage({
          key: "equipmentSubsidiaryData",
          data: this.data,
        });
        this.$forceUpdate();
      }, 100);
    },
    selectOnlineEquModel() {
      if (uni.getStorageSync("modelList")) {
        this.modelList = uni.getStorageSync("modelList");
      } else {
        API.selectOnlineEquModel({
          async: false,
          pzhAuthorization: this.pzhAuthorization,
        }).then((res) => {
          if (res.resCode == "success") {
            uni.hideLoading();
            this.modelList = res.datas;
            uni.setStorage({
              key: "modelList",
              data: this.modelList,
            });
          }
        });
      }
    },
    selectOrgOptionsList() {
      if (uni.getStorageSync("bmList")) {
        this.bmList = uni.getStorageSync("bmList");
      } else {
        API.selectOrgOptionsList({
          params: `[{"needNull":false,"executionClass":"default"}]`,
          pzhAuthorization: this.pzhAuthorization,
        }).then((res) => {
          if (res.resCode == "success") {
            uni.hideLoading();
            this.bmList = res.datas.default;
            uni.setStorage({
              key: "bmList",
              data: this.bmList,
            });
          }
        });
      }
    },
    selectUserOptionsList() {
      if (uni.getStorageSync("userList")) {
        this.userList = uni.getStorageSync("userList");
      } else {
        API.selectOrgOptionsList({
          params: `[{"needNull":false,"executionClass":"default"}]`,
          pzhAuthorization: this.pzhAuthorization,
        }).then((res) => {
          if (res.resCode == "success") {
            uni.hideLoading();
            this.userList = res.datas.default;
            uni.setStorage({
              key: "userList",
              data: this.userList,
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  height: 100vh;
  background: white;
  padding: 0rpx 0rpx 0rpx 32rpx;
  font-size: 28rpx;
  .select {
    display: flex;
    margin-top: 20rpx;
    border-bottom: 1px solid #eef1f1;
    justify-content: space-between;
    padding: 20rpx 20rpx 20rpx 0;
    image {
      width: 100rpx;
      height: 75rpx;
      display: block;
      margin: 0rpx 0 20rpx 20rpx;
    }
    //    .address{
    //        width: calc(100% - 104rpx);
    //        padding-top: 10rpx;
    //        font-size: 26rpx;
    //        margin:0 20rpx;
    //    }
    view:first-child {
      text-align: left;
      color: #b6bfc6;
    }
    view {
      font-size: 30rpx;
      text-align: right;
      max-width: 80vw;
    }
  }

  .btn:active {
    background: #1296db;
  }

  .btn {
    background: #00b9f9;
    border-radius: 40rpx;
    padding: 10rpx 0;
    width: 40vw;
    margin: 60rpx 0 0 26vw;
    display: flex;
    justify-content: center;
    color: white;
    font-size: 28rpx;
    line-height: 44rpx;
    text {
      color: #9197ae;
    }
    image {
      width: 32rpx;
      height: 32rpx;
      margin: 6rpx 0 0 16rpx;
    }
  }
}
</style>
